<template>
	<view>
		<view class="bar-title">慕康医疗助手</view>
		<view class="container">
			<!-- 消息列表 -->
			<scroll-view scroll-y="true" class="message-list" :scroll-into-view="messageId">
				<view v-for="(msg, index) in messages" :key="index" class="message-item" :class="msg.role" :id="msg.id">
					<text class="role">{{ msg.role === 'user' ? '我' : '慕康医疗助手' }}：</text>
					<text class="content">{{ msg.content }}</text>
				</view>
			</scroll-view>
		</view>
		<view class="ai-bottom">
			<view class="input-area">
				<u-input v-model="userInput" class="userInput" ref="userInputRef" placeholder="输入问题"
					@keydown.enter="sendQuery" />
				<u-button @click="sendQuery" class="btn" type="primary">发送</u-button>
			</view>
		</view>
		<u-modal v-model="loading" content="智能加载中..." :mask-close-able="true" :show-title="false"
			:show-confirm-button="false">
			<!-- 	<view class="slot-content center">
				<rich-text :nodes="content"></rich-text>
			</view> -->
		</u-modal>
		<!-- <u-loading-icon v-if="loading" text="智能加载中..."></u-loading-icon> -->
		<!-- <u-loading v-if="loading" mode="circle"></u-loading> -->
	</view>
</template>

<script>
	import {
		askDeepSeek
	} from '@/api/deepseek';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				userInput: "",
				bottom: 'bottom',
				messages: [], // 存储所有消息
				loading: false,
				messageId: 'message0', //某个对话id,用于滑动到指定id
				content: '智能加载中...',
			};
		},
		computed: {
			...mapGetters(['aiMessages']),
		},
		mounted() {
			this.messages = this.aiMessages || []
			window.addEventListener('keydown', this.handleGlobalKey)
			console.log(this.$u.config.v);
			console.log(uni.$u.config.v);
		},
		methods: {
			...mapActions(['setAiMessages']),
			toPageMenu() {
				uni.navigateTo({
					url: '/pages/menu/MenuManage'
				})
			},
			async sendQuery() {
				if (!this.userInput.trim()) return;
				// 将用户输入添加到消息数组
				this.messages.push({
					role: "user",
					content: this.userInput,
					id: "message" + this.messages.length,
				});

				this.loading = true;
				try {
					// 调用API，传入整个消息历史
					const assistantReply = await askDeepSeek([...this.messages]); // 这里传递当前所有消息
					// 将助理回复添加到消息数组
					this.messages.push({
						role: "assistant",
						content: assistantReply
					});
				} catch (error) {
					this.messages.push({
						role: "assistant",
						content: "请求出错，请重试"
					});

				} finally {
					this.loading = false;
					this.messageId = "message" + (this.messages.length - 2);

					this.userInput = ""; // 清空输入框
					// this.$nextTick(() => {
					// 	this.$refs.userInputRef.focus()
					// })
					this.setAiMessages(this.messages)
				}
			},
			handleGlobalKey(e) {
				switch (e.key) {
					case 'Enter':
						console.log("kk", this.messageId)
						this.sendQuery()
						break
					case ' ':
						if (!e.repeat) this.pause() // 防止长按重复触发
						break
				}
			},
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				//存储scrollTop值，这里使用本地存储为例
				uni.setStorageSync("scrollTop", scrollTop);
				console.log(scrollTop)
			}
		},
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		height: calc(60vh - 100px);
		border-radius: 30px 30px 0 0;
	}

	.bar-title {
		height: 50px;
		background-color: blue;
		color: white;
		font-size: 20px;
		line-height: 50px;
		padding: 0 20px;
	}

	.ai-bottom {
		position: absolute;
		bottom: 0;
		height: 50px;
		line-height: 50px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.message-list {
		flex: 1;
		overflow: auto;
	}

	.message-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.message-item.user {
		background-color: #f0f7ff;
	}

	.message-item.assistant {
		background-color: #f9f9f9;
	}

	.role {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.input-area {
		display: flex;
		padding: 20px;

		.userInput {
			width: calc(100vw - 130px);
		}

		.btn {
			width: 100px;
		}

	}
</style>